<script setup>
import { ref } from 'vue'
import { listProjectService } from '@/api/project.js'
import { getCurrentMemberService } from '@/api/member.js'
import ProjectBook from './components/ProjectBook.vue'

// 下拉刷新
const refreshLoading = ref(false)

const projectTypes = ref([]) // 服务项目类型
const selectedType = ref(1) // 当前选中的类型
const currentMemberLevel = ref() // 当前会员等级

// 获取项目列表
const listProject = async () => {
  const projectRes = await listProjectService()
  const memberRes = await getCurrentMemberService()
  projectTypes.value = projectRes.data.data
  currentMemberLevel.value = memberRes.data.data.level
  refreshLoading.value = false
}
listProject()

// 获取会员等级对应的折扣价格
const discountRates = {
  普通: 1,
  银卡: 0.95,
  金卡: 0.85,
  至尊: 0.7
}
const getDiscount = (price) => {
  return Math.floor(price * discountRates[currentMemberLevel.value])
}

// 预约
const projectBookRef = ref()
const handleBook = (project) => {
  const newProject = { ...project }
  newProject.price = getDiscount(project.price)
  projectBookRef.value.open(newProject)
}
</script>

<template>
  <div class="project-home">
    <van-nav-bar title="服务中心" fixed />
    <van-pull-refresh v-model="refreshLoading" @refresh="listProject" success-text="加载成功">
      <div class="project-container">
        <!-- 左侧边栏 -->
        <div class="project-types">
          <div
            v-for="type in projectTypes"
            :key="type.projectTypeId"
            :class="['type-item', selectedType === type.projectTypeId ? 'active' : '']"
            @click="selectedType = type.projectTypeId"
          >
            {{ type.projectTypeName }}
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="project-list">
          <template v-for="type in projectTypes" :key="type.projectTypeId">
            <div v-if="type.projectTypeId === selectedType">
              <van-empty v-if="!type.projectList?.length" image="search" description="暂无服务" />
              <div v-for="item in type.projectList" :key="item.id" class="project-item">
                <div class="project-info">
                  <h3>{{ item.name }}</h3>
                  <p class="description">{{ item.description }}</p>
                  <div class="price-action">
                    <div class="price-info">
                      <template v-if="currentMemberLevel && currentMemberLevel !== '普通'">
                        <div class="price-container">
                          <span class="discounted">
                            ¥{{ (getDiscount(item.price) / 100).toFixed(2) }}
                          </span>
                          <span class="original">¥{{ (item.price / 100).toFixed(2) }}</span>
                        </div>
                      </template>
                      <span v-else class="price">¥{{ (item.price / 100).toFixed(2) }}</span>
                    </div>
                    <van-button
                      :type="item.status === '启用' ? 'primary' : 'default'"
                      size="small"
                      :disabled="item.status === '禁用'"
                      @click="handleBook(item)"
                    >
                      {{ item.status === '启用' ? '预约' : '暂停' }}
                    </van-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </van-pull-refresh>
    <project-book ref="projectBookRef" @success="listProject"></project-book>
  </div>
</template>

<style lang="scss" scoped>
.project-home {
  padding-top: 46px;
  padding-bottom: 50px;
  background-color: #f7f8fa;
  min-height: 100vh;

  .project-container {
    display: flex;
    height: calc(100vh - 96px);

    .project-types {
      width: 80px;
      background: #fff;
      border-right: 1px solid #eee;
      overflow-y: auto;

      .type-item {
        padding: 15px 10px;
        text-align: center;
        font-size: 14px;
        color: #333;
        border-bottom: 1px solid #f5f5f5;

        &.active {
          color: #1989fa;
          background: #f7f8fa;
        }
      }
    }

    .project-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px;

      .project-item {
        background: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 12px;
        display: flex;
        gap: 12px;

        .project-info {
          flex: 1;

          h3 {
            margin: 0 0 8px;
            font-size: 16px;
            color: #333;
          }

          .description {
            font-size: 12px;
            color: #666;
            margin: 0 0 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .price-action {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .price-info {
              flex: 1;

              .price-container {
                display: flex;
                align-items: center;
                gap: 8px;

                .discounted {
                  color: #ff6b6b;
                  font-size: 18px;
                  font-weight: bold;
                }

                .original {
                  font-size: 14px;
                  color: #999;
                  text-decoration: line-through;
                  transform: translateY(1px);
                }
              }

              .price {
                color: #ff6b6b;
                font-size: 18px;
                font-weight: bold;
              }
            }

            .van-button {
              flex-shrink: 0;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
